import React from "react";
import { useLocation, useNavigate } from "react-router-dom";

// 定义医生数据类型
interface Doctor {
  doctorid: number;
  doctorname: string;
  doctordescword: string;
  doctoradmin: string;
  doctoradministre: string;
  doctorbrowse: string;
  doctorcity: string;
  doctorflag: string;
  doctorgood: string;
  doctoriddoc: string;
  doctorimage: string;
  doctorprice: number;
  doctorstate: string;
  doctortime: string;
  nosocomium: string;
  socoadmin: string;
  sococity: string;
  socodescword: string;
  socoid: number;
  socoimage: string;
  socolv: string;
  socostate: string;
}

function Index() {
  const location = useLocation();
  const navigate = useNavigate();
  const doctorData = location.state?.doctorData as Doctor;

  if (!doctorData) {
    return (
      <div style={{ padding: "20px", textAlign: "center" }}>
        <h2>未找到医生信息</h2>
        <button
          onClick={() => navigate("/home")}
          style={{ padding: "10px 20px", margin: "10px" }}
        >
          返回首页
        </button>
      </div>
    );
  }

  return (
    <div style={{ padding: "20px", maxWidth: "800px", margin: "0 auto" }}>
      <div style={{ marginBottom: "20px" }}>
        <button
          onClick={() => navigate("/home")}
          style={{
            padding: "8px 16px",
            background: "#007bff",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
          }}
        >
          ← 返回首页
        </button>
      </div>

      <div
        style={{
          border: "1px solid #ddd",
          borderRadius: "8px",
          padding: "20px",
          background: "#f9f9f9",
        }}
      >
        <h1 style={{ color: "#333", marginBottom: "20px" }}>医生详情</h1>

        <div style={{ display: "flex", gap: "20px", marginBottom: "20px" }}>
          <div
            style={{
              width: "120px",
              height: "120px",
              background: "#e9ecef",
              borderRadius: "50%",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              fontSize: "48px",
            }}
          >
            👩‍⚕️
          </div>

          <div style={{ flex: 1 }}>
            <h2 style={{ color: "#007bff", marginBottom: "10px" }}>
              {doctorData.doctorname} {doctorData.doctorstate}
            </h2>
            <p style={{ color: "#666", marginBottom: "8px" }}>
              <strong>医院：</strong>
              {doctorData.nosocomium || "未知医院"}
            </p>
            <p style={{ color: "#666", marginBottom: "8px" }}>
              <strong>科室：</strong>
              {doctorData.doctoradministre || "未知科室"}
            </p>
            <p style={{ color: "#666", marginBottom: "8px" }}>
              <strong>城市：</strong>
              {doctorData.doctorcity || "未知城市"}
            </p>
          </div>
        </div>

        <div style={{ marginBottom: "20px" }}>
          <h3 style={{ color: "#333", marginBottom: "10px" }}>擅长领域</h3>
          <p style={{ color: "#555", lineHeight: "1.6" }}>
            {doctorData.doctordescword || "暂无描述"}
          </p>
        </div>

        <div style={{ marginBottom: "20px" }}>
          <h3 style={{ color: "#333", marginBottom: "10px" }}>医生统计</h3>
          <div style={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
            <div
              style={{
                padding: "10px",
                background: "#e3f2fd",
                borderRadius: "4px",
                minWidth: "120px",
              }}
            >
              <div
                style={{
                  fontSize: "18px",
                  fontWeight: "bold",
                  color: "#1976d2",
                }}
              >
                {doctorData.doctorgood}%
              </div>
              <div style={{ fontSize: "12px", color: "#666" }}>好评率</div>
            </div>

            <div
              style={{
                padding: "10px",
                background: "#f3e5f5",
                borderRadius: "4px",
                minWidth: "120px",
              }}
            >
              <div
                style={{
                  fontSize: "18px",
                  fontWeight: "bold",
                  color: "#7b1fa2",
                }}
              >
                {doctorData.doctorflag}
              </div>
              <div style={{ fontSize: "12px", color: "#666" }}>锦旗数</div>
            </div>

            <div
              style={{
                padding: "10px",
                background: "#e8f5e8",
                borderRadius: "4px",
                minWidth: "120px",
              }}
            >
              <div
                style={{
                  fontSize: "18px",
                  fontWeight: "bold",
                  color: "#388e3c",
                }}
              >
                {doctorData.doctorbrowse}
              </div>
              <div style={{ fontSize: "12px", color: "#666" }}>浏览人次</div>
            </div>
          </div>
        </div>

        <div style={{ marginBottom: "20px" }}>
          <h3 style={{ color: "#333", marginBottom: "10px" }}>咨询类型</h3>
          <div style={{ display: "flex", gap: "10px" }}>
            <span
              style={{
                padding: "6px 12px",
                background: "#007bff",
                color: "white",
                borderRadius: "20px",
                fontSize: "14px",
              }}
            >
              图文咨询
            </span>
            <span
              style={{
                padding: "6px 12px",
                background: "#28a745",
                color: "white",
                borderRadius: "20px",
                fontSize: "14px",
              }}
            >
              电话咨询
            </span>
          </div>
        </div>

        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "20px",
            background: "white",
            borderRadius: "8px",
            border: "1px solid #ddd",
          }}
        >
          <div>
            <div
              style={{ fontSize: "24px", fontWeight: "bold", color: "#e74c3c" }}
            >
              ¥{doctorData.doctorprice}
            </div>
            <div style={{ fontSize: "14px", color: "#666" }}>起</div>
          </div>

          <button
            style={{
              padding: "12px 24px",
              background: "#e74c3c",
              color: "white",
              border: "none",
              borderRadius: "6px",
              fontSize: "16px",
              fontWeight: "bold",
              cursor: "pointer",
            }}
          >
            立即咨询
          </button>
        </div>
      </div>
    </div>
  );
}

export default Index;
